<template>
<div class="source-list" v-if="list.length">
  <div class="source-list__item" v-if="!list.length"><div class="label">暂无数据</div></div>
  <div class="source-list__item" :class="{'active': item.remark == selectItem.remark}"  
       v-for="(item, index) in list" :key="index"
       @click="clickHandle(item)"
  >
    <div class="label">{{item.remark}}</div>
    <div class="tag">{{item.total}}</div>
  </div>   
</div>
</template>
<style scoped lang="scss">
@import "../style/_vars.scss";
.source-list{
  &__item{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    .label{
      flex: 1;
      line-height: 2;
    }
    .tag {
      flex: 0 0 30px;
      padding: 0 5px;
      text-align: center;
      font-size: 12px;
      line-height: 1.4;
      border-radius: 4px;
      border: 1px solid $--border-color-base;
    }
    &:hover, &.active{
      .label{
        color: $--color-primary;
      }
      .tag{
        background: $--color-primary;
        border: 1px solid $--color-primary;
        color: white;
      }
    }
  }
  
}
</style>

<script>
import {GET_SOURCE_LIST} from '../base/types.js'
export default {
  name: 'SourceList',
  components: {
  },
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },  
  data() {
    return {
      list: [],
      selectItem: {
        remark: ''
      }
    }
  },
  methods: {
    clickHandle(item) {
      this.selectItem = item
      this.$emit('on-select', this.selectItem)
    }
  },
  created() {
  },
  mounted() {
    this.$store.dispatch(GET_SOURCE_LIST, {
      q: this.keyword
    }).then((res) => {
      // console.log('sourcelist', res)
      // console.log('result', JSON.parse(JSON.stringify(res)))
      let result = JSON.parse(JSON.stringify(res))
      this.list = result.map((item) => {
        item.columns = JSON.parse(item.columns)
        return item
      })
      this.selectItem = result[0]
      if (this.selectItem) {
        this.$emit('on-select', this.selectItem)
      }
    })
  }
}
</script>


